<template>
  <div class="system-dic-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="450px">
      <el-form ref="dicDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="类型名称">
              <el-input v-model="state.ruleForm.name" placeholder="请输入字典类型名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="类型编码">
              <el-input v-model="state.ruleForm.code" placeholder="请输入字典类型编码" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="菜单排序">
              <el-input-number v-model="state.ruleForm.sortCode" placeholder="排序" class="w100" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="描述">
              <el-input
                v-model="state.ruleForm.description"
                type="textarea"
                placeholder="请输入字典描述"
                maxlength="150"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="EditDictType">
import { reactive, ref } from "vue";
import { DictType } from "@/api-services/models/system";
import { feature } from "@/utils/axios-utils";
import dictTypeApi from "@/api-services/apis/system/dictTypeApi";
import { NotificationError, NotificationSuccess } from "@/utils/notification";

// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

// 定义变量内容
const dicDialogFormRef = ref();
const state = reactive({
  ruleForm: {} as DictType.SysDictType,
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: ""
  }
});

// 打开弹窗
const openDialog = (type: string, data: DictType.SysDictType) => {
  if (data !== null) {
    state.ruleForm = JSON.parse(JSON.stringify(data));
  }
  state.dialog.type = type;
  if (type === "edit") {
    state.dialog.title = "修改字典类型";
    state.dialog.submitTxt = "修 改";
  } else {
    state.dialog.title = "新增字典类型";
    state.dialog.submitTxt = "新 增";
  }
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = async () => {
  let err: Error | null;
  if (state.dialog.type === "add") {
    [err] = await feature(dictTypeApi.add(state.ruleForm));
  } else {
    [err] = await feature(dictTypeApi.update(state.ruleForm));
  }
  if (err) {
    NotificationError(err.message);
  } else {
    NotificationSuccess(state.dialog.title + "成功");
    closeDialog();
    emit("refresh");
  }
};

// 暴露变量
defineExpose({
  openDialog
});
</script>
<style scoped lang="scss">
span {
  .el-tag {
    padding: 5px;
  }
}
</style>
